<template>
	<view class="" style="">
		<view class="content ordersubmitcontent" style="background: #FFFFFF;margin:18rpx 20rpx; 0 20rpx;padding: 16rpx;box-sizing: border-box;" >
			<view @tap="jump('/pages/addressList/addressList', { from: 'order' })">
				<!-- 地址 -->
				<view class="add-address-box u-flex u-flex-1" v-if="!addressId">
					<view class="box-bg u-p-30 u-flex-1 u-flex u-row-between" style="width: 100%;">
						<text class="select-notice">请选择收货地址</text>
						<u-icon name="arrow-right" type=""></u-icon>
					</view>
				</view>
				<view class="orderdz" v-else>
					<view class="orderdz1">
						<view class="">
							<image src="https://s4.ax1x.com/2022/02/21/HXoquF.png" mode=""></image>
							<text class="ordername">{{ addressData.consignee }}</text>
							<text>{{ addressData.phone }}</text>
						</view>
						<view class="bejingdongce">
							{{ addressData.province_name }}{{ addressData.city_name }}{{ addressData.area_name }}{{ addressData.address }}
						</view>
					</view>
					<u-icon name="arrow-right" type=""></u-icon>
				</view>
		</view>
		
			
			<!-- 商品列表 -->
			<view class="ordersplist" v-for="g in perGoodsList" :key="g.sku_price_id">
				
				<view class="orderimg">
					<image :src="g.detail.image" mode=""></image>
				</view>
				
				<view class="orditem">
					<text>{{ g.detail.title }}</text>
					<view class="fubiaol">
						{{ g.detail.subtitle}}
					</view>
					<view class="ordflex">
						<view class="order988">
							<text
								v-show="orderType === 'score'">{{ g.detail.current_sku_price.score }}积分</text>
							<text v-show="orderType != 'score'">￥{{ g.detail.current_sku_price.price }}</text>
						</view>
						<view class="orderx2">
							X{{ g.goods_num }}
						</view>
					</view>
				</view>
			</view>
			<!-- 商品订单信息 -->
			<view class="spddxix">
				<!-- 金额 -->
				<view class="spdditem">
					<view class="">
						商品总额
					</view>
					
					<view class="" v-show="orderType === 'score'">
						{{ orderPre.score_amount}}积分
					</view>
					
					<view class="" v-show="orderType != 'score'">
						￥{{ orderPre.goods_amount || '0.00' }}
					</view>
				</view>
				<!-- 优惠券 -->
				<view class="spdditem" @click="showp=true" v-if="hasCoupons">
					<view class="orderyouhui">
						优惠券 
						<view class="keyong10">
							{{couponList.length}}个可用
						</view>
					</view>
					<view class="" style="display: flex; align-items: center;">
						<text style="color: #ff0000;margin-right: 10rpx;" v-if="orderPre.coupon_fee > 0">-￥{{orderPre.coupon_fee}}</text>
						<u-icon size="10" name="arrow-right" type=""></u-icon>
					</view>
				</view>
				<!-- 运费 -->
				<view class="spdditem">
					<view class="">
						运费
					</view>
					<view class="">
						{{ orderPre.dispatch_discount_money }}
					</view>
				</view>
				<!-- 备注 -->
				<view class="spdditem">
					<view class="">
						备注
					</view>
				</view>
				<!-- 文本域 -->
				
				<!-- <u--textarea v-model="remark" class="bztexrt" maxlength="200" count ></u--textarea> -->
			</view>
		</view>
		
		  
		
		<!-- 订单价格去支付 -->
		<view class="daqzf">
			<view v-show="orderType != 'score'" class="shidujine">
				实付金额：<text>¥{{ orderPre.total_fee || '0.00' }}</text> 
			</view>
			<view v-show="orderType === 'score'" class="shidujine">
				消耗积分：<text>{{ orderPre.score_amount}}积分</text> 
			</view>
			
			
			<view v-show="orderType != 'score'" class="daqzfactive" @click="subOrder">
				付款
			</view>
			<view v-show="orderType === 'score'" class="daqzfactive" @click="subOrder">
				确认兑换
			</view>
		</view>
		
		<!-- 优惠券弹出 -->
		<u-popup :show="showp" @close="close" :closeable="true" :round="10">
			<view class="yhqt">
				<view style="position: absolute;top: 0;right: 0;text-align: center;width: 100%;height: 90rpx;line-height: 90rpx;font-weight: 500;font-size: 34rpx;">选择优惠券</view>
				<view style="margin-bottom: 10rpx;"></view>
				<u-radio-group v-model="jian" placement="column" active-color="#0DBE94">
					<view class="yhitem">
						<u-radio  name="0" @change="radioChange1"></u-radio>
						不使用优惠券
					</view>
					<view class="yhitem" v-for="(item,index) in couponList " :key="index">
						<u-radio  :name="item.user_coupons_id" @change="radioChange1"></u-radio>
						{{item.name}}
					</view>
				</u-radio-group>
				<view class="yjm_btn" @click.stop="showp = false">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
	export default {
		data() {
			return {
				showp:false,//展开优惠券
				shows:false,
				value:"",
				radiovalue1:"余额",
				value2: '',//支付订单备注
				totalNum: 0,
				couponList: [], //优惠券列表
				addressData: {}, //收货地址
				addressId: 0, //收货地址ID
				isDisabled: false, //提交
				showCheckTime: false, //配送时间弹窗。
				checkTime: {}, //配送时间数据
				showExpressType: false, //配送方式弹窗
				expressTypeMap: {
					express: '物流快递',
					selfetch: '到店/自提',
					store: '商家配送',
					autosend: '自动发货'
				},
				from: '',
				orderType: '',
				grouponBuyType: 'alone',
				grouponId: 0,
				goodsList: [], //传递过来的参数
				perGoodsList: {}, //确认单订单商品
				currentGoodsId: 0, //当前商品id.
				currentSkuId: 0, //商品的规格ID
				remark: '',
				orderPre: {},
				couponId: 0,
				couponPrice: '选择优惠券',
				expressTypeCur: '',
				inExpressType: [], //当前商品支持的配送方式。
				
				isProtocol: true, //自提协议。
				selfPhone: '', //编辑手机号
				getFocus: false, //获取焦点。
				checkType: '自提',
				checkTimeCur: 0, //默认选中时间。
				checkTimeId: 'c1', //锚点用
				checkDayCur: 0, //默认日期
				lat: 0, //地理位置
				lng: 0,
				
				showInvoice: false, //申请发票
				invoiceType: 'person',
				selectedInvoice: '不开具发票',
				yhqnum:'0',//优惠券数量
				yhqsz:[],//优惠券数组
				jian:"0"//满减的金额
			}
		},
		onShow() {
			// 监听地址
			uni.$on('SELECT_ADDRESS', res => {
				if (res.addressData) {
					this.addressData = JSON.parse(res.addressData);
					this.addressId = this.addressData.id;
				} else {
					this.addressId = 0;
				}
				this.getPre();
				res.addressData && uni.$off('SELECT_ADDRESS');
			});
		},
		async onLoad() {
			this.goodsList = this.$Route.query.goodsList;
			this.from = this.$Route.query.from;
			this.orderType = this.$Route.query.orderType;
			this.grouponBuyType = this.$Route.query.grouponBuyType;
			this.grouponId = this.$Route.query.grouponId;
			console.log(this.$Route.query.goodsList)
			await this.init();
			// 获取优惠券
			this.getyhq()
		},
		computed:{
			sums(){
				return Number(this.orderPre.total_fee)- Number(this.jian)
			},
			// 是否可以使用优惠券
			hasCoupons() {
				if (this.couponList.length && !this.orderPre.activity_type) {
					return true;
				}
				return Boolean(
					this.couponList.length &&
					this.orderPre.activity_type &&
					this.orderPre.activity_type.indexOf('groupon') === -1 &&
					this.orderPre.activity_type.indexOf('seckill') === -1 &&
					this.orderType !== 'score'
				);
			}
		},
		methods: {
			...mapActions(['getCartList']),
			// 获取优惠券
			getyhq(){
				let _this=this
			// 	uni.$u.http.get("/addons/shopro/coupons",{
			// 		params:{type:1}
			// 	}).then(res=>{
			
			// 		console.log("获取优惠券")
			// 		_this.yhqnum=res.length
			// 		_this.yhqsz=res
			// 		console.log(_this.yhqsz)
			// 	})
			},
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
			init() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				return Promise.all([this.getDefaultAddress(), this.initDate(), this.getCoupons()]).then(() => {
					uni.hideLoading();
				});
			},
			// 初始地址
			getDefaultAddress() {
				this.$http('address.defaults', {}, '', false).then(res => {
					if (res.code === 1 && res.data) {
						this.addressData = res.data;
						this.addressId = res.data.id;
					}
					console.log(this.addressData)
					this.getPre();
				});
			},
			// 格式化选择时间
			initDate() {
				let week = {
					0: '周日',
					1: '周一',
					2: '周二',
					3: '周三',
					4: '周四',
					5: '周五',
					6: '周六'
				};
				let now = new Date().getTime();
				let today = this.$u.timeFormat(now);
				let tomorrow = this.$u.timeFormat(now + 86400000);
				let aftertomorrow = this.$u.timeFormat(now + 172800000);
				let week1 = week[new Date().getDay()];
				let week2 = week[new Date(now + 86400000).getDay()];
				let week3 = week[new Date(now + 172800000).getDay()];
				let obj = {
					day: [{
							title: '今天（' + week1 + '）',
							value: today
						},
						{
							title: '明天（' + week2 + '）',
							value: tomorrow
						},
						{
							title: '后天（' + week3 + '）',
							value: aftertomorrow
						}
					],
					time: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
						'18:00', '19:00'
					]
				};
				this.checkTime = obj;
			},
			// 可用优惠券
			getCoupons() {
				let that = this;
				that.$http('order.coupons', {
					goods_list: that.goodsList,
					from: that.from,
					address_id: that.addressId,
					coupons_id: that.couponId,
					order_type: that.orderType
				}).then(res => {
					if (res.code === 1) {
						that.couponList = res.data;
					}
				});
			},
			// 订单信息
			getPre() {
				let that = this;
				that.$http('order.pre', {
					goods_list: that.goodsList,
					from: that.from,
					address_id: that.addressId,
					coupons_id: that.couponId,
					order_type: that.orderType,
					buy_type: that.grouponBuyType,
					groupon_id: that.grouponId
				}).then(res => {
					if (res.data) {
						that.orderPre = res.data;
						that.perGoodsList = res.data.new_goods_list;
						that.totalNum = 0;
						that.perGoodsList.map(item => {
							item.selType = item.dispatch_type;
							that.totalNum += item.goods_num;
							that.goodsList.forEach(goods => {
								if (item.goods_id == goods.goods_id && item.sku_price_id == goods
									.sku_price_id) {
									goods.dispatch_type = item.dispatch_type;
			
									if (item.store_id) {
										goods.store_id = item.store_id;
									}
								}
							});
						});
					}
				});
			},
			// 提交订单
			subOrder() {
				let that = this;
				that.isDisabled = true;
				that.$http(
					'order.createOrder', {
						goods_list: that.goodsList,
						from: that.from,
						address_id: that.addressId,
						coupons_id: that.couponId,
						remark: that.remark,
						order_type: that.orderType,
						buy_type: that.grouponBuyType,
						groupon_id: that.grouponId,
						invoice: Number(that.orderPre.invoice_amount) && that.selectedInvoice !== '不开具发票' ? { ...that
							.invoiceForm.model, amount: that.orderPre.invoice_amount } : {}
					},
					'提交中...'
				).then(res => {
					that.isDisabled = false;
					if (res.code === 1) {
						that.getCartList();
						that.$Router.replace({
							path: res.data.status > 0 ? `/pages/order/payment/result` :
								`/pages/method/method`,
							query: {
								orderId: res.data.id,
								payState: res.data.status > 0 ? 'success' : 'paying',
								orderType: 'goods'
							}
						});
					}
				});
			},
			groupChange(n) {
				
			},
			// 选择付款方式
			radioChange(n) {
				console.log(n);
			},
			// 选择优惠券
			radioChange1(index){
				
				this.couponId = index >= 0 ? index : 0;
				this.getPre();
			},
			// 关闭弹框
			close() {
			    this.shows = false
				this.showp =false
			}
		}
	}
</script>

<style scoped>
	.yhitem{
		display: flex;
		margin-bottom: 40rpx;
	}
	.yhqt{
		padding: 80rpx 40rpx;
	}
	.orzhifu{
		width: 500rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		margin: 50rpx auto 0;
		background: linear-gradient(0deg, #0DBE94, #31EBBF);
		border-radius: 40rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
	}
	.zffsfirst{
		border-top: 2rpx solid #F1F1F2;
	}
	.zffs image{
		width: 43rpx;
		height: 39rpx;
		margin-right: 16rpx;
	}
	.zffs>view{
		display: flex;
		align-items: center;

	}
	.zffs{
		padding: 40rpx 40rpx 24rpx 20rpx;
		width: calc(100% - 100rpx);
		margin: 0 auto;
		border-bottom: 2rpx solid #D9D9D9;
		display: flex;
		justify-content: space-between;
	}
	.zhifufangs{
		padding: 36rpx 0 50rpx;
		position: relative;
	}
	.zhifufangsiguanbi{
		position: absolute;
		right: 30rpx;
		top: 40rpx;
		width: auto;
	}
	.bztexrt{
		width: calc(100% - 20rpx);
		height: 119rpx;
		background: #F5F5F5;
		font-size: 20rpx;
		padding: 10rpx;
	}
	.xuzxff{
		text-align: center;
	}
	.xuzxff>text{
		display: block;
		font-size: 36rpx;
		font-weight: 400;
		color: #333333;
		padding-bottom: 33rpx;
	}
	.keyong10{
		padding: 8rpx;
		background: #FDD9E3;
		margin-left: 12rpx;
		border-radius: 2rpx;
		font-size: 20rpx;
		font-weight: 500;
		color: #EA4C31;
	}
	.orderyouhui{
		display: flex;
		
		align-items: center;
	}
	.spdditem>view{
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
	}
	.spdditem{
		display: flex;
		justify-content: space-between;
		padding: 30rpx 0;
		align-items: center;
	}
	.spddxix{
		padding: 0 20rpx 0 10rpx;
		width: calc(100% - 30rpx );
	}
	.order988{
		font-size: 26rpx;
		font-weight: 500;
		color: #CD0000;
	}
	.orderx2{
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
	}
	.orditem{
		width: calc(100% - 151rpx);
	}
	.orditem>text{
		font-size: 30rpx;
		font-weight: 400;
		color: #333333;
	}
	.orditem>.fubiaol{
		margin: 10rpx 0 15rpx 0;
		font-size: 20rpx;
		font-weight: 400;
		color: #888888;
	}
	.orderimg{
		width: 130rpx;
		height: 130rpx;
		background: #06E1AD;
		margin-right: 21rpx;
	}
	.orderimg>image{
		width: 130rpx;
		height: 130rpx;
	}
	.ordflex{
		display: flex;
		justify-content: space-between;
	}
	.ordersplist{
		padding: 60rpx 30rpx 40rpx 10rpx;
		width: calc(100% - 40rpx );
		display: flex;
		border-bottom: 2rpx solid #D6D6D6;
	}
	.orderdz1>view{
		display: flex;
		align-items: center;
	}
	.bejingdongce{
		margin-top: 23rpx ;
		font-size: 24rpx;
		font-weight: 400;
		color: #666666;
	}
	.ordername{
		margin: 0 46rpx 0 8rpx;
	}
	.orderdz1>view>image{
		width: 24rpx;
		height: 30rpx;
	}
	.orderdz1>view>text{
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
	}
	.orderdz{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 20rpx 30rpx 30rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx 10rpx 0 0;
	}
	.ordersubmitcontent{
		padding-top: 18rpx;
	}
	.daqzf{
		position:fixed;
		bottom: 0;
		height: 98rpx;
		line-height: 98rpx;
		background: #FFFFFF;
		box-shadow: 0px 2px 2px 0px rgba(14, 5, 10, 0.1);
		padding: 0 30rpx;
		width: calc(100% - 60rpx);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.daqzfactive{
		width: 200rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
		background: linear-gradient(90deg, #0DBE94, #0DBE94);
		border-radius: 35px;
	}
	.shidujine{
		font-size: 34rpx;
		font-weight: bold;
		color: #333333;
	}
	.shidujine>text{
		font-size: 34rpx;
		font-weight: bold;
		color: #CD0000;
	}
.u-row-between {
    justify-content: space-between;
}
.u-flex {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.add-address-box{
	min-height: 53px;
	margin: 0 -20rpx;
	padding: 0 20rpx;
	box-sizing: border-box;
	    background: url(http://file.shopro.top/imgs/order/order_address_line.png) no-repeat;
	    background-size: 100% auto;
	    background-position: bottom center;
}
</style>
